<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>CSS实现二级导航菜单效果</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<div>
		<ul>
			<li class="item"><a href="#" class="a1 active">首页</a></li>
			<li class="item">
				<a href="#" class="a1">项目</a>
				<ol>
					<li><a href="#">项目1</a></li>
					<li><a href="#">项目2</a></li>
					<li><a href="#">项目3</a></li>
					<li><a href="#">项目4</a></li>
				</ol>
			</li>
			<li class="item">
				<a href="#" class="a1">案例</a>
				<ol>
					<li><a href="#">案例1</a></li>
					<li><a href="#">案例2</a></li>
					<li><a href="#">案例3</a></li>
					<li><a href="#">案例4</a></li>
					<li><a href="#">案例5</a></li>
					<li><a href="#">案例6</a></li>
					<li><a href="#">案例7</a></li>
					<li><a href="#">案例8</a></li>
				</ol>
			</li>
			<li class="item"><a href="#" class="a1">产品</a></li>
			<li class="item"><a href="#" class="a1">访问</a></li>
			<li class="item"><a href="#" class="a1">价格</a></li>
			<li class="item"><a href="#" class="a1">重量</a></li>
			<li class="item"><a href="#" class="a1">体积</a></li>
		</ul>
	</div>

	<script type="text/javascript" src="jquery-3.4.1.js"></script>
	<script src="./index.js"></script>
</body>

</html>